<template>
  <div style="background:#efefef">
    <!-- <div class="navigationold">
      <div class="back"><span class="backs"></span></div>
      <div class="circle"><span class="circles"></span></div>
    </div> -->
    <van-tabs v-model="active" scrollspy sticky>
      <van-tab title="返回">
        {{ str }}
        <template #title>
          <van-icon name="arrow-left" @click="fun1"  /></template>
      </van-tab>
      <van-tab title="商品">
        <Banners :msg="arr"></Banners>
        <Commodityprice :pr="price" :ps="pros"></Commodityprice>
      </van-tab>
      <van-tab title="评价">
        <appraise></appraise>
      </van-tab>
            <van-tab title="推荐">
        <recommend></recommend>
      </van-tab>
      <van-tab title="详情">
        <detail :kach="arr"></detail>
      </van-tab>

      <van-tab title="dian">
        {{ str }}
        <template #title> <van-icon name="ellipsis" /></template>
      </van-tab>
    </van-tabs>
    <!-- :sku="sku" -->
    <van-goods-action>
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="quantity" @click="fun3"/>
      <van-goods-action-button
        color="linear-gradient(to right,#ff6034,#ee0a24)"
        type="warning"
        text="加入购物车"
        @click="show = !show"
      />

      <van-goods-action-button
        color="linear-gradient(to right,#ffd01e,#ff8917)"
        type="danger"
        text="立即购买"
      />
    </van-goods-action>
    <van-action-sheet v-model="show">
      <div class="content">
        <van-card
          :price="((price / 10) * count).toFixed(2)"
          :origin-price="price"
          :desc="des"
          :title="pro"
          :thumb="arr[0]"
        >
          <template #footer>
            <van-stepper
              v-if="sto >= 1"
              v-model="num"
              theme="round"
              button-size="22"
              disable-input
            />
            <span v-if="sto < 1">暂无存货</span>
          </template>
          <template #bottom>
            <div>
              销量:{{ sal }}<br />
              库存:{{ sto }}
            </div>
          </template>
        </van-card>
        <van-button
          :round="flag1"
          style="width: 60%; margin: 0 0 0 19vw"
          color="linear-gradient(to right, #ff6034, #ee0a24)"
          @click="fun"
        >
          加入购物车
        </van-button>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import Banners from "./Banners.vue";
import Commodityprice from "./Commodityprice.vue";
import Vue from "vue";
import { Tab, Tabs } from "vant";
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from "vant";
import { ActionSheet } from "vant";
import axios from "axios";
import detail from './detail.vue';
import recommend from './recommend.vue';
import appraise from './appraise.vue'
Vue.use(ActionSheet);
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
Vue.use(Tab);
Vue.use(Tabs);
export default {
  data() {
    return {
      str: "",
      active: 1,
      arr: [],
      price: 0,
      pros: "",
      show: false,
      num: 1,
      count: 0,
      des: "",
      sto: "",
      sal: "",
      flag1: true,
      quantity: null,
      pro: "",
    };
  },

  components: {
    Banners,
    Commodityprice,
    detail,
    recommend,
    appraise,
  },
  methods: {
    // 加入购物车
    fun() {
      this.show = !this.show;
      //判断用户是否登录
      if (sessionStorage.getItem("token")) {
        //已经登录判断购物车是否存在该商品
        axios({
          url: "http://localhost:3000/shopping",
          method: "get",
          params: {
            proid: this.pro,
          },
        }).then(
          (res) => {
            //购物车存在该商品，发行求修改该对象数量
            if (res.data.length > 0) {
              axios({
                url:"http://localhost:3000/shopping/"+res.data[0].id,
                method:"PATCH",
                data:{
                  num: this.num + res.data[0].num,
                }
              }).then(res=>{
                console.log(res);
              },rej=>{
                console.log(rej);
              })
            } else {
              //购物车不存在该商品，直接加入购物车
              axios({
                url: "http://localhost:3000/shopping",
                method: "POST",
                data: {
                  //用户id
                  userid: sessionStorage.getItem("userid"),
                  //商品id
                  proid: this.pro,
                  //商品数量
                  num: this.num,
                  //商品单价
                  price: this.price,
                  //商品标题
                  title: this.pros,
                  //商品图片
                  thumb: this.arr[0]
                },
              }).then((res) => {
                console.log(res);
              });
            }
          },
          (rej) => {
            console.log(rej);
          }
        );
      } else {
        //没有登录跳转至登录页面
        this.$router.push("/LoginPage");
      }
    },
    fun1() {
      this.$router.back();
    },
    fun3(){
      this.$router.push('/ShoppingCart')
    }
  },
  mounted() {
    this.pro = this.$route.query.proid;
    console.log("我接到了");
    this.$http({
      url: "api/pro/detail/" + this.$route.query.proid, // 设置请求的地址
      method: "GET", // 设置请求方法
    }).then((res) => {
      // res为后端返回的数据
      this.arr.push(res.data.data.img1);
      this.arr.push(res.data.data.img2);
      this.arr.push(res.data.data.img3);
      this.arr.push(res.data.data.img4);
      this.price = res.data.data.originprice;
      this.pros = res.data.data.proname;
      this.count = res.data.data.discount;
      this.des = res.data.data.desc;
      this.sto = res.data.data.stock;
      this.sal = res.data.data.sales;
      console.log(res.data.data.originprice);
      // res.data.forEach(element => {
      //   this.list.push(element)
      //   // console.log(this.arr)
      // });
    });
  },
};
</script>

<style scoped>
.navigationold {
  background: transparent;
  /* background-color: #000; */
  width: 100%;
  height: 38px;
  position: fixed;
  top: 0;
}
.back {
  display: inline-block;
  background-color: #666;
  padding: 5px;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  margin: 7px 0 0 5px;
  /* width: 38px;
    height: 38px; */
}
.backs {
  background: url("")
    no-repeat 50%;
  background-size: 20px 20px;
  margin: 0;
  width: 20px;
  height: 20px;
  display: block;
}
.circle {
  background-color: #666;
  padding: 5px;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  margin: 7px 5px 0 5px;
  float: right;
}
.circles {
  display: inline-block;
  margin: 0;
  width: 20px;
  height: 20px;
  background: url("")
    no-repeat 50%;
  background-size: 20px;
}
.content {
  padding: 16px 16px 160px;
}
</style>